import React, { Component } from 'react'
import {Form,Input} from 'antd';
import axios from 'axios';


export default class EditForm extends Component {
    formRef = React.createRef();
    
    state={url:this.props.data.manage_avatar}

    componentDidMount(){

        const {setFieldsValue}= this.formRef.current;

        setFieldsValue({
            manage_id:this.props.data.manage_id,
            manage_account:this.props.data.manage_account,
            manage_pwd:this.props.data.manage_pwd,
            manage_avatar:this.state.url
            // manage_avatar:this.state.url
       });
    }

    
  imageitem=(e)=>{
    let that=this;

    let image=document.getElementById('imageitem').files[0];
 
      var formData=new FormData();
      formData.append('image',image);
     
      const token=localStorage.getItem('token');
      if(token){
          // console.log(token);
          axios.post("https://wx.xxmtcds.top:2333/admin/storeimage",formData,{
            headers: { 'authorization': `${token}`,'content-type':'multipart/form-data' }
          })
            .then(function(response){
              that.setState({url: response.data})
              that.formRef.current.setFieldsValue({ manage_avatar:that.state.url });
              console.log(that.state.url);
            })
            .catch(err=>console.log(err))
    }

  }

    render() {
        return (
            <Form ref={this.formRef}
                layout="horizontal"
                labelCol={{span:4}}//不能超过24
                wrapperCol={{span:10}}>
                
                <Form.Item name="manage_id" label='编号' >
                <Input disabled={true}/>  
                </Form.Item>
                    
                <Form.Item name="manage_account" label='用户名' 
                    rules={[
                        {
                            required:true,
                            message:'请输入用户名',
                        }]}>
                <Input placeholder='用户名' />  
                </Form.Item>
                <Form.Item name="manage_pwd" label='密码' 
                    rules={[{
                            required:true,
                            message:'请输入密码',
                        }]}>
                <Input placeholder='密码' />  
                </Form.Item>
                <Form.Item name="manage_avatar" label='头像' 
                    rules={[{
                            message:'请选择头像',
                        }]}>
                        <Input placeholder={this.state.url} disabled={true}/>
                        <input type='file' placeholder='修改头像' accept=".jpg" name="storefile" onChange={this.imageitem} id="imageitem"/>
                  
                    </Form.Item>
                </Form>
        )
    }
}


